<template>
    <div>
        <el-form ref="form" label-width="80%">
            <div class="box-body">
                <section class="content" id="diff">
                    <div class="row">
                        <el-table stripe :highlight-current-row='true' :data="datas" border style="width: 100%">
                          <el-table-column fixed type='index' label="序号" :width='80'></el-table-column>
                          <el-table-column label="姓名" :width='180'>
                            <template scope="scope">
                              {{ nameFormatter(scope.row) }}
                            </template>
                          </el-table-column>
                            <el-table-column label="属性" :width='180'>
                                <template scope="scope">
                                    {{ fieldFormatter(scope.row) }}
                                </template>
                            </el-table-column>
                            <el-table-column label="变更前" :width='180' >
                            <template scope="scope">
                                <el-button v-if="isClickable(scope.row) && !isEmpty(scope.row.before)" size="small" @click="viewBefore(scope.row)">
                                    <i class="fa fa-edit">查 看</i>
                                </el-button>
                                <label v-if="!isClickable(scope.row) && !isEmpty(scope.row.before)">{{ beforeFomatter(scope.row) }}</label>
                            </template>
                            </el-table-column>
                            <el-table-column label="变更后" :width='180'>
                                <template scope="scope">
                                    <el-button v-if="isClickable(scope.row) && !isEmpty(scope.row.after)" size="small" @click="viewAfter(scope.row)">
                                        <i class="fa fa-edit">查 看</i>
                                    </el-button>
                                    <label v-if="!isClickable(scope.row) && !isEmpty(scope.row.after)">{{ afterFomatter(scope.row) }}</label>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </section>
            </div>
        </el-form>
    </div>
</template>

<script>
    import approveUtils from "../../../common/approveUtils";
    let approvalObj = new approveUtils()
    export default {
        name: "Diff",
        props: ["dffers"],
        components: {
        },
        data() {
            return {
                datas: this.dffers,
                columns: approvalObj.getDiffCols(),
                differCols: approvalObj.getDiffColumnsInfo()
            };
        },
        methods: {
            isEmpty(data){
                if(data && data instanceof Array){
                    return data.length <= 0
                }
                return !data;
            },
            viewBefore(row) {
                var propName = 'view'+row.field+'Visible'
                var data = row.before
                this.$emit('viewDataChanged', {propName:propName,data:data});
            },
            viewAfter(row) {
               var propName = 'view'+row.field+'Visible'
                var data = row.after
                this.$emit('viewDataChanged', {propName:propName,data:data});
            },
            afterFomatter(row) {
                var col = this.differCols[row.field]
                if (col) {
                    var formatter = col.formatter
                    return formatter(row.after)
                }
                return row.field
            },
            beforeFomatter(row) {
              const col = this.differCols[row.field];
              if (col) {
                    var formatter = col.formatter
                    return formatter(row.before)
                }
                return row.field
            },
            fieldFormatter(row) {
              const col = this.differCols[row.field];
              if (col) {
                    return col.title
                }
                return row.field
            },
            nameFormatter(row) {
              return row["name"]
            },
            isClickable(data) {
                var col = this.differCols[data.field]
                return (col && col.clickable);
            },
            view(row) {
                console.log('view data:' + row.field + " json:" + JSON.stringify(row))
            }
        }
    };
</script>
